.makeRandomPercent() {
  @randomNum: `Math.min(0.8, Math.max(0.2, Math.random())) `;
  @randomPercent: percentage(@randomNum);
}

.loadingSkeleton {
  background-color: #fff;
  padding: 0 20px;
  ul {
    display: flex;
  }
  li {
    width: 100%;
    height: 16px;
    border-radius: 16px;
    background-color: #f5f5f5;
    margin: 13px 0;
    &:nth-child(2n) {
      .makeRandomPercent();
      width: @randomPercent;
    }
  }
  &.active {
    li {
      animation: paragraphAnimation 2s ease infinite;
      background: linear-gradient(
        90deg,
        rgba(245, 245, 245, 0.8) 25%,
        rgba(245, 245, 245, 0.4) 37%,
        rgba(245, 245, 245, 0.8) 63%
      );
      background-size: 400% 100%;
    }
  }
}

@keyframes paragraphAnimation {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}
